<div>
  <div nz-row>
    <div nz-col [nzFlex]="1">
      <form nz-form>
        <div nz-row [nzGutter]="16">
          <nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>姓名</nz-form-label>
              <nz-form-control [nzSpan]="16">
                <input (ngModelChange)="realNameChange($event)" [ngModel]="realNameSource | async" name="realName" nz-input
                       placeholder="输入姓名以查询"/>
              </nz-form-control>
            </nz-form-item>
          </nz-col>
          <nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>年龄</nz-form-label>
              <nz-form-control [nzSpan]="16">
                <nz-input-number (ngModelChange)="ageChange($event)" [ngModel]="ageSource | async" name="age"
                                 nzPlaceHolder="输入年龄以查询" style="width: 100%"/>
              </nz-form-control>
            </nz-form-item>
          </nz-col>
          <nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>地址</nz-form-label>
              <nz-form-control [nzSpan]="16">
                <input (ngModelChange)="addressChange($event)" [ngModel]="addressSource | async" name="address" nz-input
                       placeholder="输入地址以查询"/>
              </nz-form-control>
            </nz-form-item>
          </nz-col>
        </div>
      </form>
    </div>
    <nz-divider style="height: 75px" nzType="vertical"></nz-divider>
    <div nz-col [nzFlex]="'60px'">
      <button (click)="this.handleQuery()" nz-button nzType="primary">
        <span nz-icon nzType="search"></span>
        查询
      </button>
      <button nz-button style="margin-top: 10px" (click)="handleReset()">
        <span nz-icon nzType="rollback"></span>
        重置
      </button>
    </div>
  </div>
  <nz-divider style="margin-top: 8px"></nz-divider>
  <button nz-button nzType="primary" style="width: 80px; margin-bottom: 8px;" (click)="createModal(false)">
    <span nz-icon nzType="plus" nzTheme="outline"></span>新增
  </button>
  <nz-table class="table-class" #basicTable [nzData]="(users$ | async)!" [nzTotal]="(totalSource | async)!" [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="pageIndexChange($event)" (nzPageSizeChange)="pageSizeChange($event)"
            [nzFrontPagination]="false"
            [nzPageSizeOptions]="[10,30,50]" nzShowSizeChanger
            [nzLoading]="loadingSource | async">
    <ng-template #totalTemplate let-total>总数：{{ total }}</ng-template>
    <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>
        <a (click)="handleDetail(data)">{{ data.realName }}</a>
      </td>
      <td>{{ data.age }}</td>
      <td>{{ data.address }}</td>
      <td>
        <a (click)="createModal(true, data)">修改</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-popconfirm nzPopconfirmTitle="确定要删除吗？" (nzOnConfirm)="handleRemove(data)"
           style="color: red">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>
